<!--
 * @Descripttion: 保养计划-关联保养项目
 * @LastEditors: xzh
 * @LastEditTime: 2023-10-18 16:01:38
-->
<template>
  <DileTable class="relUpkeep-table" ref="dileTableRef">
    <template #preColumn>
      <vxe-column
        field="name"
        :title="$t('page.equipSpareArr.spareLedgerArr.name')"
        :edit-render="{}"
        width="200"
      >
        <template #edit="{ row }">
          <DileInputSelectItem
            size="default"
            :selectType="selectTypeEnum.moldSpare"
            :expand-on-click-node="false"
            :cacheLabel="row.name"
            multiple
            @beforeClick="changeeditAutoClose"
            @close="changeeditAutoClose(true)"
            @itemSelected="handleAddRelUpkeep($event, row)"
          />
        </template>
      </vxe-column>
      <vxe-column
        field="code"
        :title="$t('page.equipSpareArr.spareLedgerArr.code')"
      />
      <vxe-column
        field="specification"
        :title="$t('page.equipSpareArr.spareLedgerArr.specification')"
      />
      <vxe-column field="typeId" :title="$t('page.equipSpareArr.spareType')">
        <template #default="{ row }">
          <span>{{ row.extJson?.typeName }}</span>
        </template>
      </vxe-column>
      <vxe-column
        field="unit"
        :title="$t('page.equipSpareArr.spareLedgerArr.unit')"
        width="100"
      >
        <template #default="{ row }">
          <span>{{ row.extJson?.unitName }}</span>
        </template>
      </vxe-column>
      <vxe-column
        field="inventoryUpperLimit"
        :title="$t('page.equipSpareArr.spareLedgerArr.inventoryUpperLimit')"
        width="100"
      />
      <vxe-column
        field="inventoryLowerLimit"
        :title="$t('page.equipSpareArr.spareLedgerArr.inventoryLowerLimit')"
        width="100"
      />
      <vxe-column
        field="inventoryTotalLimit"
        :title="$t('page.equipSpareArr.spareLedgerArr.currentInventory')"
        width="100"
      />
      <!-- 额外列 -->
      <slot name="extClounm"></slot>
    </template>
  </DileTable>
</template>

<script setup lang="ts">
import { ref, reactive, provide, toRefs, readonly } from "vue";
import {
  btnTypeEnum,
  propsParam_Inf,
} from "@/components/dile-table/index.type";
import type { object_Inf } from "@/utils/typings/index.type";
import { selectTypeEnum } from "@/components/dile-selectItem/index.type";
import DileInputSelectItem from "@/components/dile-selectItem/selectItem-input/index.vue";
import DileTable from "@/components/dile-table/index.vue";
import Dile_Methods from "@/utils/methods";
/**
 * @Author: xzh
 * @Descripttion: 表格实例
 * @Param:
 */
let dileTableRef = ref<any>(null);

/**
 * @Author: xzh
 * @Descripttion: 初始表格对象
 * @Param:
 */
let sourceTableData = readonly<Array<object_Inf>>([]);

/**
 * @Author: xzh
 * @Descripttion:表格加载事件
 * @Param:
 */
let initTableData = (tableData: Array<object_Inf>) => {
  //设置表格数据源
  propsParam.tableData = tableData;
  //记录原始数据源
  sourceTableData = Object.freeze(tableData);
};
/**
 * @Author: xzh
 * @Descripttion:工具栏按钮点击事件
 * @Param:
 * @param {*} event
 */
let handleToolBtnClick = (event: object_Inf) => {
  let { code } = event,
    { rowChecked } = dileTableRef.value;
  //![新增]->行勾选判断
  if (!["add"].includes(code) && !rowChecked()) {
    return false;
  }
  switch (code) {
    case "add":
      propsParam.tableData?.push({ rowId: Dile_Methods.newGuid() });
      break;
    case "delete":
      //删除
      handleDelete();
      break;
  }
};

/**
 * @Author: xzh
 * @Descripttion: 添加关联备件
 * @Param:
 */
let handleAddRelUpkeep = (dataArr: Array<object_Inf>, row: object_Inf) => {
  let { tableData }: object_Inf = toRefs(propsParam);
  //排除重复数据
  dataArr = dataArr.filter(
    (x: object_Inf) =>
      !(tableData?.value || []).map((y: object_Inf) => y.id).includes(x.id)
  );
  //修改当前行数据
  Object.assign(
    row,
    dataArr.find((x) => true)
  );
  //获取不重复的数据
  let addArr = dataArr.filter((x: object_Inf) => x.id !== row.id);

  addArr.length > 0 && (tableData.value = tableData.value?.concat(addArr));
  //修改表格可编辑自动关闭
  changeeditAutoClose(true);
};

/**
 * @Author: xzh
 * @Descripttion: 删除事件
 * @Param:
 */
let handleDelete = () => {
  //获取表格选择项
  let { selectObjArr } = dileTableRef.value.getTableParam(),
    { tableData }: object_Inf = toRefs(propsParam);
  //移除选中行
  tableData.value = tableData.value.filter(
    (x: object_Inf) => !selectObjArr.map((y: object_Inf) => y.id).includes(x.id)
  );
};

/**
 * @Author: xzh
 * @Descripttion: 修改表格可编辑自动关闭
 * @Param:
 * @param {*} autoClear
 */
let changeeditAutoClose = (autoClear: boolean = false) => {
  (propsParam.editConfig as object_Inf).autoClear = autoClear;
};

/**
 * @Author: xzh
 * @Descripttion: 表格参数
 * @Param:
 */
let propsParam = reactive<propsParam_Inf>({
  loading: false,
  checkbox: true,
  tableData: [],
  isPagination: false,
  editConfig: {
    trigger: "click",
    mode: "cell",
    autoClear: true,
  },
  rowConfig: {
    keyField: "rowId",
  },
  tableToolArr: [
    {
      // t("table.btnArr.add"),
      label: "table.btnArr.add",
      code: "add",
      btnType: btnTypeEnum.button,
      plain: false,
      customBehavior: true,
    },
    {
      // t("table.btnArr.delete"),
      label: "table.btnArr.delete",
      code: "delete",
      btnType: btnTypeEnum.button,
      customBehavior: true,
    },
  ],
  emitEvents: {
    toolBtnClick: handleToolBtnClick,
  },
});
provide("propsParam", propsParam);

defineExpose({
  //获取关联数据
  getRelData: () =>
    Dile_Methods.dataArrDiffFormat(
      sourceTableData as Array<object_Inf>,
      propsParam.tableData || []
    ),
  getTableData: () => propsParam.tableData || [],
  initTableData,
});
</script>
<style lang="scss" scoped>
.relUpkeep-table {
  width: 100%;
  height: 20rem;
}
</style>
